<template>
	<view class="joinus">
		<view class="call">
			<view class="top">
				<view class="code">

				</view>
				怎么称呼？<text class="star">*</text>
			</view>
			<view class="bottom">
				<input type="text" maxlength="5" placeholder="请输入您的真实姓名" placeholder-style="color: rgba(0, 0, 0, 0.25)">
			</view>
		</view>
		<view class="call">
			<view class="top">
				<view class="code">

				</view>
				联系方式<text class=" stardemo">*</text>
			</view>
			<view class="bottom">
				<input type="number" maxlength="11" placeholder="请输入您的手机号" @input="isvalid($event)" v-model="form.key"
					placeholder-style="color: rgba(0, 0, 0, 0.25)">
				<view class="msg" v-show="this.ifvalid">
					请输入正确格式的手机号
				</view>
				<!-- 清除内容按钮 -->
				<uni-icons class="clean" type="clean" v-show="form.key" @click="clean"></uni-icons>
			</view>
		</view>
		<view class="call">
			<view class="top">
				<view class="code">

				</view>
				合作详细描述<text class=" stardemo">*</text>
			</view>
			<view class="bottom">
				<div id="main-container">
					<view class="detail-describe-box public345">
						<textarea class="detail-describe" cols="30" rows="10" maxlength="200" @input="monitorInput"
							placeholder="请描述具体合作内容，稍后我们将及时与您联系(10~200字以内)" placeholder-style="color:#D0D0D0"
							v-model="textareaContent"></textarea>
						<text class="detail-describe-tip">
							{{ num }}/200
						</text>
					</view>
				</div>
			</view>
			<view class="button">
				<view class="btn">立即提交</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		log
	} from 'util';
	export default {
		data() {
			return {

				form: {
					key: ''
				},
				ifvalid: false,
				model1: {
					userInfo: {
						name: 'uView UI',
						sex: '',
					},
				},
				textareaContent: '',
				num: 0,
			}
		},
		methods: {
			clean() {
				this.form.key = ''
			},
			monitorInput() {
				var txtVal = this.textareaContent.length;
				this.num = txtVal;
			},
			// 手机号校验
			isvalid($event) {
				console.log(this.form.key);
				let str = $event.target.value
				if (str.length >= 11) {
					const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
					if (!reg.test(str)) {
						this.ifvalid = true
						console.log('您输入的手机号不正确')
					} else {
						this.ifvalid = false
					}
				}
			}
		},
		components: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	// 优惠券盒子
	.joinus {
		width: 100vw;
		position: relative;

		.call {

			display: flex;
			flex-direction: column;
			position: relative;

			.top {
				margin-top: 32rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				display: flex;
				justify-content: left;
				align-items: center;
				font-weight: 500;

				.code {
					border-radius: 4rpx;
					margin-left: 30rpx;
					margin-right: 20rpx;
					width: 8rpx;
					height: 32rpx;

					background: #FF7803;

				}

				.star {
					color: red;
				}

				.stardemo {
					color: red;
					margin-left: 16rpx;
				}
			}

			.bottom {
				margin-top: 32rpx;
				position: relative;

				input {
					box-sizing: border-box;
					padding-left: 30rpx;
					border-radius: 16rpx;
					margin: 0 auto;
					width: 690rpx;
					height: 88rpx;
					background: #F8F8F8;
				}

				.textarea {
					background: #F8F8F8;
					margin: 0 auto;
					width: 690rpx;
					height: 330rpx;
					border-radius: 16rpx;
					padding: 24rpx;
					box-sizing: border-box;
				}

				textarea {
					margin: 0 auto;
					width: 690rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					height: 260rpx;
					position: relative;

					.numLimit {
						position: absolute;
						right: 24rpx;
						bottom: -55rpx;
						color: #D0D0D0;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 24rpx;
						letter-spacing: 0.64rpx;
					}
				}


				.msg {
					position: absolute;
					bottom: -30rpx;
					left: 30rpx;
					font-size: 24rpx;
					color: red;

				}

				.clean {
					position: absolute;
					right: 50rpx;
					top: 28rpx;
					opacity: .5;
				}
			}

			.button {
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				position: fixed;
				bottom: 16rpx;
				left: 30rpx;

				.btn {
					background: #FF7803;
					width: 690rpx;
					height: 88rpx;
					border-radius: 44rpx;
					margin: 0 auto;
					text-align: center;
					line-height: 88rpx;
					color: #fff;
					font-size: 28rpx;
					font-weight: 500;
					margin-top: 32rpx;
				}
			}

		}
	}

	.detail-describe-box {
		position: relative;

		// 详细描述
		.detail-describe {
			width: 100%;
			padding: 24rpx;
			background-color: #f8f8f8;
			border-radius: 16rpx;
			font-size: 24rpx;
			box-sizing: border-box;
		}

		.detail-describe-tip {
			position: absolute;
			bottom: 16rpx;
			right: 42rpx;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 24rpx;
			color: rgba(0, 0, 0, 0.25);
		}
	}
</style>
